import 'package:abc/controller/vip_center_controller.dart';
import 'package:abc/page/coin_recharge_page.dart';
import 'package:abc/page/purchase_record_page.dart'; // 添加购买记录页面导入
import 'package:abc/page/redeem_page.dart'; // 添加兑换页面导入
import 'package:abc/view/CustomAppBar.dart';
import 'package:abc/view/GradientButton.dart';
import 'package:abc/view/PaymentMethodSheet.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class VipCenterPage extends GetView<VipCenterController> {
  const VipCenterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (!Get.isRegistered<VipCenterController>()) {
      Get.lazyPut(() => VipCenterController());
    }
    return Scaffold(
      backgroundColor: const Color(0xFF0E0F26), // 沿用金币充值页面的深色背景
      body: Column(
        children: [
          // 顶部导航栏 (使用 CustomAppBar 或标准 AppBar)
          CustomAppBar(
            title: "会员中心",
            onBack: () {
              Get.back();
            },
            rightText: "购买记录", // 添加右上角购买记录按钮
            onRightTextTap: () {
              Get.to(() => const PurchaseRecordPage()); // 跳转到购买记录页面
            },
          ),

          Expanded(
            child: SingleChildScrollView(
              padding: const EdgeInsets.symmetric(horizontal: 15),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(height: 10),
                  _buildUserInfoCard(), // 用户信息和VIP卡片
                  const SizedBox(height: 20),
                  _buildPackageSelection(controller), // 会员套餐选择
                  const SizedBox(height: 20),
                  _buildBenefitsGrid(), // 会员权益
                  const SizedBox(height: 100), // 留给底部按钮的空间
                ],
              ),
            ),
          ),
          _buildBottomButtons(), // 底部双按钮 (兑换/开通)
          const SizedBox(height: 18),
        ],
      ),
    );
  }

  // --- 2. 用户信息卡片 ---
  Widget _buildUserInfoCard() {
    return Container(
      width: double.infinity,
      height: 169 + 8,
      child: Stack(
        children: [
          Positioned(
            top: 8,
            right: 0,
            left: 0,
            child: Image.asset(
              'assets/images/vip_card_texture.png',
              height: 169,
            ),
          ),

          Positioned(
            top: 12,
            left: 20,
            child: Image.asset(
              'assets/images/vip_card_texture_1.png',
              height: 140,
            ),
          ),
          Positioned(
            top: 12,
            left: 170,
            child: Image.asset(
              'assets/images/vip_card_texture_1.png',
              height: 130,
            ),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            left: 0,
            child: Image.asset('assets/images/vip_card_texture_bottom.png'),
          ),
          Positioned(
            top: 21 + 8,
            bottom: 21,
            right: 0,
            child: Image.asset('assets/images/vip_v_bg.png'),
          ),
          Positioned(
            top: 0,
            right: 28,
            child: Image.asset(
              'assets/images/vip_badge.png',
              width: 38,
              height: 46,
            ),
          ),
          Positioned(
            top: 22 + 8,
            left: 0,
            right: 0,
            child: Container(
              height: 35,
              decoration: BoxDecoration(color: const Color(0x33E8BF9B)),
            ),
          ),
          Positioned(
            top: 12 + 8,

            left: 14,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Image.asset(
                      'assets/images/vip_header.png',
                      width: 56,
                      height: 56,
                    ),
                    SizedBox(width: 9),
                    Text(
                      '张大美丽',
                      style: TextStyle(
                        color: Color(0xFFB97C48),
                        fontSize: 20,
                        height: 1,
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 47),
                Text(
                  'VIP会员至：2025-11-07',
                  style: TextStyle(
                    color: Color(0xFF3E1D04),
                    fontSize: 12,
                    height: 1,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // --- 3. 会员套餐选择 ---
  Widget _buildPackageSelection(VipCenterController controller) {
    Widget buildOption(int index) {
      return Obx(() {
        final isSelected = index == controller.selectedPackageIndex;
        final pkg = controller.packages[index];

        return GestureDetector(
          onTap: () {
            controller.setSelectedPackageIndex(index);
          },
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 14),
            height: 100,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              border: Border.all(
                color: isSelected ? Colors.transparent : Colors.white,
                width: 1,
              ),
              // 选中时使用渐变色，未选中时使用透明
              gradient: isSelected
                  ? const LinearGradient(
                      colors: [
                        Color(0xFFA877F4),
                        Color(0xFF5650D6),
                      ], // 沿用金币充值页面的渐变色
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                    )
                  : null,
              color: isSelected ? null : const Color(0xFF2B2B43), // 深色卡片背景
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  pkg['name'] as String,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 15,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                const SizedBox(height: 4),
                Row(
                  children: [
                    Text(
                      '¥',
                      style: const TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w500,
                        fontSize: 20,
                      ),
                    ),
                    Text(
                      pkg['price'] as String,
                      style: const TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 30,
                      ),
                    ),
                  ],
                ),
                Text(
                  pkg['original'] as String,
                  style: TextStyle(
                    color: Colors.white54,
                    fontSize: 15,
                    decoration: TextDecoration.lineThrough,
                  ),
                ),
              ],
            ),
          ),
        );
      });
    }

    return Container(
      padding: const EdgeInsets.only(left: 10, right: 10, top: 15, bottom: 16),
      decoration: BoxDecoration(
        color: const Color(0x33959595), // 卡片背景色
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '会员套餐选择',
            style: TextStyle(
              color: Colors.white,
              fontSize: 16,
              fontWeight: FontWeight.w500,
            ),
          ),
          const SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [buildOption(0), buildOption(1), buildOption(2)],
          ),
          const SizedBox(height: 10),
          // 套餐描述
          Obx(() {
            final selectedPackage = controller.selectedPackage;
            return Text(
              selectedPackage['desc'] as String,
              style: const TextStyle(
                color: Colors.white60,
                fontSize: 13,
                height: 1.8,
              ),
            );
          }),
        ],
      ),
    );
  }

  // --- 4. 会员权益网格 ---
  Widget _buildBenefitsGrid() {
    final benefits = [
      {'title': '会员内容', 'subtitle': '免费', 'icon': 'vip_hynr'},
      {'title': '金币内容', 'subtitle': '免费', 'icon': 'vip_jbnr'},
      {'title': '1对1', 'subtitle': '专属客服', 'icon': 'vip_zskf'},
      {'title': 'AI绘画', 'subtitle': '免费3次', 'icon': 'vip_aihh'},
      {'title': 'AI小说', 'subtitle': '100金币', 'icon': 'vip_aixs'},
      {'title': '经验值', 'subtitle': '+5经验值', 'icon': 'vip_jyz'},
      {'title': '金币视频', 'subtitle': '免费3次', 'icon': 'vip_jbnr'},
      {'title': 'AI图片换衣', 'subtitle': '免费3次', 'icon': 'vip_aihy'},
      {'title': '图生视频', 'subtitle': '免费3次', 'icon': 'vip_hynr'},
      {'title': 'AI换脸', 'subtitle': '免费2次', 'icon': 'vip_aihl'},
      {'title': 'AI语音', 'subtitle': '免费2次', 'icon': 'vip_aiyy'},
      {'title': 'AI视频换衣', 'subtitle': '免费3次', 'icon': 'vip_aihy'},
    ];

    Widget buildBenefitItem(Map<String, Object> benefit) {
      return Column(
        children: [
          Container(
            width: 25,
            height: 25,
            padding: EdgeInsets.all(5),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Color(0xFFFFF8E1),
            ),
            child: Image.asset(
              'assets/images/${benefit['icon']}.png',
              fit: BoxFit.contain,
            ),
          ),
          const SizedBox(height: 5),
          Text(
            benefit['title'] as String,
            style: const TextStyle(color: Colors.white, fontSize: 12),
          ),
          Text(
            benefit['subtitle'] as String,
            style: const TextStyle(color: Colors.white70, fontSize: 12),
          ),
        ],
      );
    }

    return Container(
      padding: const EdgeInsets.only(left: 10, right: 10, top: 15, bottom: 16),
      decoration: BoxDecoration(
        color: const Color(0x33959595), // 卡片背景色
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '会员权益',
            style: TextStyle(
              color: Colors.white,
              fontSize: 16,
              fontWeight: FontWeight.w500,
            ),
          ),

          GridView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4, // 每行 4 个
              crossAxisSpacing: 15,
              mainAxisSpacing: 15,
              childAspectRatio: 0.85, // 调整纵横比以适应内容
            ),
            itemCount: benefits.length,
            itemBuilder: (context, index) {
              return buildBenefitItem(benefits[index]);
            },
          ),
        ],
      ),
    );
  }

  // --- 5. 底部双按钮 ---
  Widget _buildBottomButtons() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      child: Row(
        children: [
          // 兑换按钮 (非渐变)
          Expanded(
            child: Container(
              height: 44,
              margin: const EdgeInsets.only(right: 8),
              child: ElevatedButton(
                onPressed: () {
                  // 跳转到兑换页面
                  Get.to(() => const RedeemPage());
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.white, // 深色背景
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0),
                  ),
                ),
                child: const Text(
                  '兑换',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF5650D6),
                  ),
                ),
              ),
            ),
          ),

          // 开通会员按钮 (渐变)
          Expanded(
            child: Container(
              height: 44,
              margin: const EdgeInsets.only(left: 8),
              // 这里假设使用 GradientButton 或直接使用 BoxDecoration
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30.0),
                gradient: const LinearGradient(
                  colors: [Color(0xFFA877F4), Color(0xFF5650D6)],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
              ),
              child: ElevatedButton(
                onPressed: () {
                  /* 开通会员逻辑 */
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.transparent, // 确保按钮背景透明，显示渐变
                  shadowColor: Colors.transparent,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                ),
                child: const Text(
                  '开通会员',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
